<template>
  <div>
    <header>
      上报日期：
      <el-date-picker
        v-model="workloadTime"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      &nbsp;
      <el-button type="primary" @click="openAddWorkload"
        >添加工作日志</el-button
      >
    </header>
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 10px"
      row-key="id"
    >
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="reportTime" label="上报日期" />
      <el-table-column prop="content" label="工作总结" />
      <el-table-column prop="type" label="工作日志类型">
        <template #default="scope">
          {{ workloadType[scope.row.type - 1] }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="openWorkloadDetails(scope.row)"
            >详情</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            confirm-button-type="danger"
            title="是否确定删除项目"
            @confirm="deleteWorkloadFun(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 常规数据分页开始 -->
    <el-pagination
      v-model::current-page="query.current"
      v-model:page-size="query.size"
      style="margin-top: 10px"
      :total="pageTotal"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      layout="prev,pager,next,jumper,sizes,total"
      @size-change="pageSizeChange"
      @current-change="currPageChange"
    />

    <el-dialog
      v-model="workloadDetailsDisplay"
      :title="title"
      width="600"
      destroy-on-close
    >
      <el-form
        label-width="auto"
        :model="workloadForm"
        class="demo-form-inline"
      >
        <el-form-item label="上报日期">
          <el-date-picker v-model="workloadForm.reportTime" />
        </el-form-item>
        <el-form-item :label="workAhead[workloadTypeStatus - 1]">
          <el-input v-model="workloadForm.workAhead" type="textarea" />
        </el-form-item>
        <el-form-item
          v-if="workAfter[workloadTypeStatus - 1] !== '不显示'"
          :label="workAfter[workloadTypeStatus - 1]"
        >
          <el-input v-model="workloadForm.workAfter" type="textarea" />
        </el-form-item>
        <el-form-item :label="workPlan[workloadTypeStatus - 1]">
          <el-input v-model="workloadForm.workPlan" type="textarea" />
        </el-form-item>
        <el-form-item label="总结">
          <el-input v-model="workloadForm.content" type="textarea" />
        </el-form-item>
      </el-form>
      工时明细
      <el-table
        :data="workloadForm.workTimes"
        border
        style="width: 100%; margin-top: 20px"
        row-key="uuid"
      >
        <el-table-column prop="projectId" width="250px" label="项目">
          <template v-slot="scope">
            <project-selector v-model="scope.row.projectId" />
          </template>
        </el-table-column>
        <el-table-column label="工时">
          <template v-slot="scope">
            <el-input-number v-model="scope.row.timeCount" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="danger" @click="delWorktime(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button style="margin-top: 20px" @click="addWorktime"
        >添加一项
      </el-button>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="title == '工作日志详情'"
            type="primary"
            @click="workloadUpdateFun"
            >修改</el-button
          >
          <el-button
            v-if="title == '添加工作日志'"
            type="primary"
            @click="addWorkloadFun"
            >立即添加</el-button
          >
          <el-button @click="workloadDetailsDisplay = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import {
  createWorkload,
  deleteWorkload,
  myWorkload,
  updateWorkload
} from "@/api/workload.ts";
import {
  workAfter,
  workAhead,
  workloadType,
  workPlan
} from "@/constants/project.ts";
import { shortcuts } from "@/constants/time.ts";
import { DateModelType, ElMessage } from "element-plus";
import { stdTime } from "@/utils/time.ts";

import { ProjectWorkloadListVo } from "@/api/models";
import ProjectSelector from "@/components/Selector/ProjectSelector.vue";
import { guid } from "@/utils/idUtils.ts";
import { companySettings } from "@/api/companySettings.ts";

defineOptions({
  name: "worklog"
});
let tableData = ref([]);
let query = reactive({ current: 1, size: 10 });
let pageTotal = ref<number>(0);
async function getList() {
  let res = await myWorkload(
    query.current,
    query.size,
    workloadTime.value?.[0] ? stdTime(workloadTime.value[0]) : "",
    workloadTime.value?.[1] ? stdTime(workloadTime.value[1]) : ""
  );
  if (res.code === 200) {
    tableData.value = res.data.records;
    pageTotal.value = res.data.total;
  }
}
function pageSizeChange(pageSize) {
  query.size = pageSize;
  query.current = 1;
  getList();
}
// 数据页码变化
function currPageChange(pageIndex) {
  query.current = pageIndex;
  getList();
}
let workloadTime = ref<[DateModelType, DateModelType]>(["", ""]);
let workloadTypeStatus = ref(1);
let companyWorkloadTypeStatus = 1;
onMounted(async () => {
  await getList();
  let res = await companySettings();
  companyWorkloadTypeStatus = res.data.workloadType;
});
watch(workloadTime, () => {
  query.current = 1;
  getList();
});
let title = ref("工作日志详情");
let workloadForm = ref<
  ProjectWorkloadListVo & { workTimes?: { uuid?: string }[] }
>({ workTimes: [] });
let workloadDetailsDisplay = ref(false);
function openWorkloadDetails(row) {
  workloadForm.value = row;
  workloadDetailsDisplay.value = true;
  workloadTypeStatus.value = row.type;
}
function delWorktime(row) {
  for (let i = 0; i < workloadForm.value.workTimes.length; i++) {
    if (workloadForm.value.workTimes[i].uuid === row.uuid) {
      workloadForm.value.workTimes.splice(i, 1);
      break;
    }
  }
}
function addWorktime() {
  workloadForm.value.workTimes.push({ uuid: guid(), timeCount: 0 });
}
function openAddWorkload() {
  title.value = "添加工作日志";
  workloadDetailsDisplay.value = true;
  workloadTypeStatus.value = companyWorkloadTypeStatus;
  workloadForm.value = {
    workTimes: [],
    reportTime: new Date().toString(),
    type: companyWorkloadTypeStatus
  };
}
async function addWorkloadFun() {
  let res = await createWorkload({
    ...workloadForm.value,
    reportTime: stdTime(workloadForm.value.reportTime)
  });
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "添加成功"
    });
    workloadDetailsDisplay.value = false;
    await getList();
  } else {
    ElMessage({
      type: "error",
      message: res.msg
    });
  }
}
async function deleteWorkloadFun(id) {
  let res = await deleteWorkload(id);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "删除成功"
    });
    await getList();
  } else {
    ElMessage({
      type: "error",
      message: res.msg
    });
  }
}
async function workloadUpdateFun() {
  let res = await updateWorkload({
    ...workloadForm.value,
    reportTime: stdTime(workloadForm.value.reportTime),
    workTimesAdd: workloadForm.value.workTimes
  });
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "修改成功"
    });
    workloadDetailsDisplay.value = false;
    getList();
  } else {
    ElMessage({
      type: "error",
      message: res.msg
    });
  }
}
</script>
